<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>社区详情</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src="../js/config.js"></script>
		<style type="text/css">
			/* 背景 */
			.page{
				background-color: white;
			}
			#forum-top{
				height: 2rem;
				line-height: 2rem;
			}
			/* 社区信息 */
			#forum-mes{
				height: 4rem;
				margin-top: 0.4rem;
			}
			#forum-mes>div{
				float: left;
			}
			/* 头像圆角 */
			#forum-mes img{
				height: 3rem;
				height: 3rem;
				border-radius:0.5rem;
			}
			#forum-mes span{
				font-size: 0.7rem;
				line-height: 1.5rem;
			}
			#forumMes{
				padding-left: 0.8rem;
				padding-top: 0.2rem;
			}
			#name{
				font-weight: 700;
			}
			#forum-mes .num{
				font-size: 0.65rem;
			}
			.titles{
				font-size: 0.9rem;
			}
			/* 管理员 */
			#admin{
				height: 6rem;
			}
			#admin>div{
				float: left;
				line-height: 2rem;
			}
			.img{
				height: 2rem;
				width: 2rem;
				margin-right: 0.5rem;
			}
			.img img{
				height: 100%;
				width:  100%;
				border-radius: 1rem;
			}
			.list-block textarea{
				height:8rem;
			}
			.content-block{
				margin-top: 0.7rem;
			}
			/* popup遮罩异常 */
			.modal-overlay.modal-overlay-visible,
			.popup-overlay.modal-overlay-visible,
			.preloader-indicator-overlay.modal-overlay-visible {
				visibility: hidden;
			}
			/* 四周间距 */
			.content-padded{
				padding: 1rem;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page" style="background-color: #f0fffe;">
			<!-- 这里是页面内容区 -->
			<div v-if="data!=null" class="content content-padded">
				<!-- 返回工具 -->
				<div id="forum-top" class="row">
					<span @click="returns" class="f1 iconfont icon-fanhui col-40"></span>
					<span id="" class="f2 col-50">
						社区详情
					</span>
				</div>
				
				<!-- 社区信息 -->
				<div id="forum-mes">
					<div id="">
						<img :src="imgSrc(data.forumForum.photo)" >
					</div>
					<div id="forumMes">
						<span id="name">
							{{data.forumForum.name}}
						</span><br>
						<span id="">
							<span class="num">
								用户：{{data.forumUserNum}}
							</span>
							<span class="num" style="margin-left: 0.5rem;">
								话题：{{data.forumTopicNum}}
							</span>
						</span>
					</div>
				</div>
				<!-- 简介 -->
				<div id="">
					<div style="height: 1.5rem;">
						<span class="titles" >
							简介：
						</span>
					</div>
					<div style="height: 3.5rem; font-size: 0.7rem;">
						<span id="">
							{{data.forumForum.intro}}
						</span>
					</div>
				</div>
				<!-- 公告 -->
				<div>
					<div style="height: 1.5rem;">
						<span  class="titles">
							公告：
						</span>
					</div>
					<div  style="height: 3.5rem; font-size: 0.7rem;">
						<span>
							{{data.forumForum.notice}}
						</span>
					</div>
				</div>
				<!-- 地址 -->
				<div  style="height: 2.5rem; ">
					<span  class="titles">
						地址：
					</span>
					<span id="" style="font-size: 0.7rem;">
						{{data.forumForum.address}}
					</span>
				</div>
				<!-- 电话 -->
				<div  style="height: 2.5rem; ">
					<span class="titles">
						电话：
					</span>
					<span id="">
						{{data.forumForum.phone}}
					</span>
				</div>
				<!-- 管理员 -->
				<div id="admin">
					<div class="titles">
						管理员：
					</div>
					<div class="img" v-for="item in data.forumAdmins">
						<a :href="adminUser(item.id)">
							<img :src="imgSrc(item.photo)" >
						</a>
					</div>
				</div>
				<div id="addAdmin" v-if="data.status==0">
					<div class="content-block open-popup">
					    <p><a href="#" class="button button-big button-round">申请管理员</a></p>
					</div>
				</div>
			</div>
		<!-- popup -->
			<div class="popup">
				<div class="content-block">
					<!-- 工具栏 -->
					<div class="addTopic-top row">
						<div class="t1 col-33">
							<span class="close-popup iconfont icon-fanhui"></span>
						</div>
						<div class="t2 col-33">
							<span>申请信息</span>
						</div>
					</div>
					<div id="addTopic-count" class="item-content list-block">
						<textarea id="applyMes"  maxlength="10000" required placeholder="申请信息填写..."></textarea>
					</div>
					<a @click="addAdmin" style="width: 4rem;margin-left: 10rem;" class="button button-fill button-primary col-15">提交申请</a>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			/* 获取请求参数 */
			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
				var r = window.location.search.substr(1).match(reg); //匹配目标参数
				if (r != null) return unescape(r[2]);
				return null; //返回参数值
			}
			var forumId = getUrlParam('forumId');
			//绑定vue
			var app = new Vue({
				el: ".page",
				data: {
					data: null
				},
				created() {
					 axios.get(serviceIP+"/forum/forumDetails?forumId=" + forumId,{headers:{"token":token,"refreshtoken":refreshtoken}}).then(result => {
						this.data = result.data.data;
					});
				},
				methods: {
					/* 图片 */
					imgSrc: function(src) {
						return  src;
					},
					/* 返回 */
					returns: function()  {
						window.history.go(-1);
					},
					adminUser:function(id){
						return "forum-other-centre.html?userId="+id;
					},
					/* 申请管理员 */
					addAdmin: function() {
						var content=($("#applyMes").val());
						if(content.length<20){
							$.toast("写的也太少了....");
						}else{
							axios.get(serviceIP+"/forum/addAdmin", {
								params: {
									forumId: forumId,
									content: content
								},
								headers:{"token":token,"refreshtoken":refreshtoken}
							}).then(result => {
								if (result.data.status == 1) {
									$.toast("已提交");
									$("#applyMes").val("");
									$.closeModal(".popup");
								} else {
									$.toast("失败，系统维护中");
								}
							});
						}
					}
				}
			});
		</script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script>
			$.init();
		</script>
	</body>

</html>
